
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录系统</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="full-screen" content="yes"/>
<meta name="browsermode" content="application"/>
<meta name="x5-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="x5-page-mode" content="app"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./resources/css/bootstrap-vue.min.css"/>
<link rel="stylesheet" type="text/css" href="./resources/files/assets/icon/themify-icons/themify-icons.css">
<link rel="stylesheet" type="text/css" href="./resources/files/assets/css/style.css">
</head>
<body themebg-pattern="theme0">

<div class="theme-loader">
<div class="loader-track">
<div class="preloader-wrapper">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
 <div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>

<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header" header-theme="theme1">
<div class="navbar-wrapper">

<div class="navbar-logo">
<a href="index.html">
<!-- <img class="img-fluid" src="./resources/files/assets/images/logo.png" alt="Theme-Logo" /> -->
<h3>欢迎使用本系统</h3>
</a>
</div>


<div class="navbar-container container-fluid">
<ul class="nav-left">
<li>
<a href="#!" onclick="javascript:toggleFullScreen()" class="waves-effect waves-light">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="header-notification"></li>
</ul>
</div>
</div>
</nav>
</div>

<section class="login-block">

<div class="container-fluid"  id="app">
<div class="row">
<div class="col-sm-12">

<form class="md-float-material form-material m-t-40 m-b-40">
<div class="auth-box card">
<div class="card-block">
<div class="row m-b-20">
<div class="col-md-12">
<h3 class="text-center">登&nbsp;录</h3>
</div>
</div>
<div class="form-group form-primary">
<input type="text"  class="form-control" name="username" id="username" type="text"     v-on:keyup.enter="login" v-model.trim="userid" autofocus>
<span class="form-bar"></span>
<label class="float-label">用户名</label>
</div>
<div class="form-group form-primary">
<input type="password"  class="form-control"  name="password"  id="password" type="password" v-on:keyup.enter="login" v-model.trim="password">
<span class="form-bar"></span>
<label class="float-label">密码</label>
</div>

<div class="row m-t-30">
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-md btn-block waves-effect waves-light text-center m-b-20" @click="login">登&nbsp;录</button>
 </div>
</div>
<hr />
<div class="row">
<div class="col-md-10">
<p class="text-inverse text-left m-b-0">提示信息</p>
</div>

</div>
</div>
</div>
</form>

</div>

</div>

</div>

</section>
</div>
<div class="footer">
<p class="text-center m-b-0">Copyright &copy; 2019  , All rights reserved.</p>
</div>


<script type="text/javascript" src="./resources/files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="./resources/files/assets/pages/waves/js/waves.min.js"></script>
<script type="text/javascript" src="./resources/files/assets/js/common-pages.js"></script>
<script src ="./resources/js/vue.min.js"></script>
<script src ="./resources/js/bootstrap-vue.min.js"></script>
<script src ="./resources/js/axios.min.js"></script>
<script src ="./resources/js/vue-axios.min.js"></script>
<script src ="./resources/js/app.js"></script>
<script type="text/javascript">
new Vue({
	   el   : '#app'
	  ,data :{
		   userid:'admin'
		  ,password:'123456'
	  }
	  ,mounted:function (){
	  }
	  ,methods :{
		  login:function (){
			    if(!this.userid ){
			    	this._toast("用户名不能为空!");
			    	return ;
			    }
			    if(!this.password  ){
			    	this._toast("密码不能为空!");
			    	return ;
			    }
			    this.$http.post('login/test', {userid:this.userid,password:this.password })
			    .then((result) =>{
			        var user=result;
			        //保存用户信息
			        AppContext.setUser(user);
			        //跳转
			        window.location.href='main.html';
			    });
			    
		  }
	  }
	});
</script>
</body>
</html>
